@use 'sass:color';

$white-color: #fff;
$black-color: #000;

// =================================
// ============== main-color =======
// =================================
// 主色
$primary-color: #0081ff;

// 主悬浮色
$primary-hover-color: color.scale($primary-color, $lightness: 10%);

// 主激活色
$primary-active-color: color.scale($primary-color, $lightness: -10%);

// 主浅(背景)色
$primary-bg-color: color.scale($primary-color, $lightness: 30%, $alpha: -85%);

// 成功色
$success-color: #09b66d;

// 成功浅(背景)色
$success-bg-color: color.scale($success-color, $lightness: 30%, $alpha: -85%);

// 警告色
$warning-color: #ff8a48;

// 警告浅(背景)色
$warning-bg-color: color.scale($warning-color, $lightness: 30%, $alpha: -85%);

// 错误色
$error-color: #ff3d57;
$danger-color: #ff3d57;

// 错误浅(背景)色
$error-bg-color: color.scale($error-color, $lightness: 30%, $alpha: -85%);
$danger-bg-color: color.scale($danger-color, $lightness: 30%, $alpha: -85%);

// 文本色
$info-color: #6c757d;

// 文本浅(背景)色
$info-bg-color: color.scale($info-color, $lightness: 30%, $alpha: -85%);

// 禁用色
$disabled-color: #6c757d;

// 禁用浅(背景)色
$disabled-bg-color: color.scale($disabled-color, $lightness: 30%, $alpha: -85%);

// =================================
// ============== text-color =======
// =================================
// 主文本色
$text-main: #1b222a;

// 基础文本色
$text-primary: #44566c;

// 常规文本色
$text-regular: #606266;

// 副文本色
$text-secondary: #8697a8;

// 占位文本色
$text-placeholder: #a8abb2;

// 禁用文本色
$text-disabled: #c0c4cc;

// =================================
// =========== background-color ====
// =================================
// 主背景色
$background-main: #f1f2f3;

// 基础背景色
$background-primary: #fff;

// 常规背景色
$background-regular: #f2f4f6;

// 副背景色
$background-secondary: #fafafa;

// 占位背景色-unused
$background-placeholder: #fff;

// 禁用背景色-unused
$background-disabled: #fff;

// 特殊-框架背景颜色-unused
$layout-background: $background-primary;

// 特殊-页面背景颜色-unused
$page-background: $background-regular;

// 特殊-组件背景颜色-unused
$component-background: $background-secondary;

// =================================
// =========== link-color =========
// =================================
// 链接色
$link-color: $primary-color;

// 链接悬浮色
$link-hover-color: color.scale($primary-color, $lightness: 10%);

// 链接点击色
$link-active-color: color.scale($primary-color, $lightness: -10%);

// =================================
// =========== border-color =========
// =================================
// 边框色
$border-color: #8697a8;

// 边框色-浅
$border-color-light: #eaedf0;

// =================================
// =========== mix-theme-color =========
// =================================
$elname: '--el-color-primary';
@mixin MixElPrimaryThemeColor {
  @for $i from 1 through 9 {
    $percentage: $i * 10%;

    #{$elname}-light-#{$i}: color.mix($white-color, $primary-color, $percentage);
    #{$elname}-dark-#{$i}: color.mix($black-color, $primary-color, $percentage);
  }
}
